<template>
  <!-- 提示信息 -->
  <div class="prompt-information borderStyle">
    <div class="prompt-information-title smallCenterTitle centerbox">提示信息</div>
    <div class="prompt-information-bar">
      <div class="bar-row centerbox" v-for="(item,index) of dataList" :key="index">
        <div class="bar-row-name endbox">{{item.name}}</div>
        <div class="bar-row-color"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface statusList {
  name: string;
}
@Component
export default class PromptInformation extends Vue {
  dataList: Array<statusList> = [
    {
      name: "包括电子钥匙充电故障",
    },
    {
      name: "电子钥匙通讯故障",
    },
    {
      name: "交流电源输入异常",
    },
    {
      name: "内存存储异常告警",
    },
    {
      name: "装置异常报警",
    },
  ];
}
</script>

<style lang="scss" scoped>
.prompt-information {
  width: 100%;
  height: 100%;
  &-title {
    width: 4.32rem;
    height: 0.36rem;
    margin: auto;
    color: #fff;
  }
  &-bar {
    width: 100%;
    height: calc(100% - 0.36rem);
    .bar-row {
      width: 100%;
      display: flex;
      height: 0.4rem;
      .bar-row-name {
        width: 40%;
      }
      .bar-row-color {
        width: 1.5rem;
        height: 0.15rem;
        margin-left: 0.2rem;
      }
    }
    :nth-child(odd) {
      :nth-child(2) {
        background: linear-gradient(
          90deg,
          rgba(255, 0, 0, 1) 0%,
          rgba(255, 0, 0, 0) 100%
        );
      }
    }
    :nth-child(even) {
      :nth-child(2) {
        background: linear-gradient(
          90deg,
          rgba(0, 255, 144, 1) 0%,
          rgba(255, 0, 0, 0) 100%
        );
      }
    }
  }
}
</style>